<template>
  <div class="json-editor" v-once></div>
</template>

<script>
import { getMonaco, onMonacoResize } from "./editors/editor.core";
export default {
  async mounted() {
    const monaco = await getMonaco("vs/language/json/jsonMode");
    console.log(monaco);
    const $editor = monaco.editor.create(this.$el, {
      language: "json",
      fontSize: 18,
      tabSize: 2,
      theme: "vs-dark",
      automaticLayout: true,
      value: `{
"queryCode": "TEST_DEMO_SUTENTD2",
"queryName": "",
"groupKey": "",
"remark": "",
"statConfig": {},
"designConfig": {}
      }`,
    });
    // onMonacoResize(this, () => $editor.layout());

    console.log($editor);

    setTimeout(() => {
      $editor.trigger("格式化", "editor.action.formatDocument");
    }, 0);
  },
};
</script>

<style scoped>
.json-editor {
  text-align: left;
  width: 100%;
  height: 100%;
  height: calc(100vh - 100px);
}
</style>
